<template>
	<view>
		<view style="margin: 20rpx 20rpx; background-color:#f7fafd;;">
			<view class="header">
				<image :src="teamDoctorData.avatar" mode=""></image>
				<view class="team-information">
					<text class="title">{{teamDoctorData.name}}</text>
					<view class="institution">
						<text>所属机构：</text>
						<text>{{teamDoctorData.organizationId?.name}}</text>
					</view>
					<view class="institution">
						<text>签约人数：</text>
						<text style="color:#2984F8;;">{{teamDoctorData.signNumber}}</text>
					</view>
					<view style="display: flex; align-items: center; margin-top: 10rpx;">
						<uni-rate :readonly="true" :value="teamDoctorData.rate"></uni-rate>
						<text style="font-size: 24rpx; color:#FDDB78; ;">{{teamDoctorData.rate}}</text>
					</view>
				</view>
			</view>

			<view style="display: flex;">
				<view class="tag" v-for="item in teamDoctorData.tagIds" :key="item._id">
					<uni-tag :text="item.name" type="primary" />
				</view>
			</view>

			<text style="font-size: 36rpx; margin: 20rpx 0;">团队医生</text>
			<!-- //领队渲染 -->
			<view class="doctor" style="margin-bottom: 20rpx;">
				<view class="doctor-detail" @click="todoctor(detailData._id)">
					<image :src="detailData.avatar" mode="" />
					<view>
						<text style="margin-right: 10rpx;">{{detailData.name}}</text>
						<text> {{detailData.roleId?.name}}</text>
						<view>
							<text>签约人数：</text>
							<text>{{detailData.signNumber}}</text>
						</view>
					</view>
				</view>
			</view>


			<!-- //医生渲染 -->
			<view v-for="item in teamData" :key="item._id">
				<view class="doctor">
					<view class="doctor-detail" @click="todoctor(item._id)">
						<image :src="item.avatar" mode="" />
						<view>
							<text style="margin-right: 10rpx;">{{item.name}}</text>
							<text> {{item.roleId?.name}}</text>
							<view>
								<text>签约人数：</text>
								<text>{{item.signNumber}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		fetchTeamDetailApi,
		memberDataApi
	} from '../../../api/teamDoctor.js';
	import {
		useUserStore
	} from '../../../store/user.js';

	const userstore = useUserStore()

	const todoctor = (_id) => {

		if (_id) {
			uni.navigateTo({
				url: `/minePackage/pages/doctor-details/doctor-details?_id=${_id}`
			})
		}
	}
	//全部团队
	const teamDoctorData = ref({})
	//获取团队id
	const doctorData = ref({})
	//获取医生ID
	const IdDoctor = ref({})
	//领队数据
	const detailData = ref({})
	//医生
	const teamData = ref({})

	onLoad((options) => {
		doctorData.value = options._id
		console.log(doctorData.value, '医生数据');
		fetchTeamDetail()
		memberData()
	})



	//获取团队详情
	async function fetchTeamDetail() {
		const res = await fetchTeamDetailApi({
			_id: doctorData.value
		})
		if (res.code == 200) {
			console.log(res.data);
			teamDoctorData.value = res.data
			IdDoctor.value = res.data._id
			//领队数据
			detailData.value = res.data.leaderId

		}
	}


	//医生
	function memberData() {
		memberDataApi({
			_id: doctorData.value
		}).then(res => {
			if (res.code == 200) {
				console.log(res.data);
				teamData.value = res.data
			}
		})
	}
	onLoad(() => {
		memberData()

		fetchTeamDetail()
	})
</script>

<style scoped lang="scss">
	.header {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;

		image {
			width: 220rpx;
			height: 220rpx;
			margin-right: 10rpx;
		}

		.team-information {
			.title {
				font-size: 36rpx;
				color: #333;
			}

			.institution {
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
			}
		}
	}

	.tag {
		width: 160rpx;
		height: 64rpx;
		margin: 20rpx 10rpx;
	}

	.doctor {
		width: 670rpx;
		height: 200rpx;
		margin: auto;
		border-radius: 20rpx;
	}

	.doctor-detail {
		display: flex;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 30rpx;

		// box-shadow: 2px 2px 2px grey;
		image {
			width: 128rpx;
			height: 128rpx;
		}
	}
</style>